<template>


    <a-modal :title="title" :width="1100" :destroyOnClose="true" :maskClosable="false"
             :visible="visible" @cancel="handleCancel">

        <a-table :columns="columns" :rowKey="record => record.id" :dataSource="dataSource" :pagination="pagination"
                 :loading="loading" @change="handleTableChange"  :showFooter="true"
                 bordered>


            <template slot="timeName" slot-scope="text, record">
                <b> {{record.name}} </b>
                <br>
                {{record.startTime}} 至 {{record.endTime}}
            </template>
            <template slot="freeRule" slot-scope="text, record">
                <p v-if="record.freeMinutes>0" class="text-danger">TIME<{{ fmtMinutes(record.freeMinutes) }}，免费</p>
                <p v-else>无免费规则</p>
            </template>
            <template slot="firstRule" slot-scope="text, record">
                <span  v-if="record.freeMinutes>0">  TIME>={{ fmtMinutes( record.freeMinutes)}} 且</span>
                TIME <= {{fmtMinutes(record.firstMinutes)}},收费{{record.firstFee/100}}元
            </template>
            <template slot="renewalRule" slot-scope="text, record">
                TIME > {{ fmtMinutes(record.firstMinutes)}}后, 按每{{ fmtMinutes(record.renewalMinutes)}}收费{{record.renewalFee/100}}元续费
            </template>
            <!-- 操作插槽 -->
            <template slot="operation" slot-scope="text, record">
                <a @click="openEdit(record)">编辑</a>
                <a-divider type="vertical" />

                <a-popconfirm slot="actions"
                              title="确定要删除这个时段规则吗?"
                              @confirm="removeTimePeriod(record)">
                    <a>删除</a>

                </a-popconfirm>


            </template>

            <template slot="footer" slot-scope="currentPageData">
                <p>规则说明:</p>
                <p>1.本规则表格内，符号TIME 表示 车辆实际停车时长</p>
                <p>2.本系统内,计费时间单位为:分钟,例如18分59秒,在实际计费过程中,只计算18分钟,停车秒长度自动省略</p>
                <p>3.当续费时长不足1个续费时长单位时,按照1个单位续费时长规则进行收费</p>
            </template>
        </a-table>


        <!-- Modal 页脚 -->
        <template slot="footer">
            <a-button @click="handleCancel">关闭</a-button>
            <a-button type="primary"  @click="openEdit()">添加时段规则</a-button>

        </template>

        <TimeEdit  v-if="editShow"  :editRecord="editRecord"  @closeFun="closeEdit" />


    </a-modal>

</template>
<script>
    import {

        ruleTimesTable
    } from '../../public/colums.js';

    import {TimePeriodList,TimePeriodDelete} from "../../public/http";

    export default {

        props: ["record"],

        components:{
            TimeEdit:()=>import('./time_edit'),


        },

        data() {
            return {
                editShow:false,
                editRecord:{},


                loading: false, //按钮Loading
                title: "时段规则设置",
                dataSource: [],
                visible: true, //modal 显示状态
                columns: ruleTimesTable, //表头管理
                pagination: false, //复制预设的分页参数
            };
        },
        methods: {

            fmtMinutes(val){
                if (val % 60 === 0 && val >= 60) {
                  return  val / 60 +"小时";
                } else {
                     return  val+' 分钟' ;
                }


            },

            //关闭弹窗
            handleCancel() {
                this.visible = false;
                this.$emit('closeModal', {
                    render: false
                });
            },


            //完成监听
            onSubmit(e) {
                //AJAX时间数据处理

                //关闭弹窗
                this.visible = false;
                this.$emit('closeModal', {render: false});

            },

            //1.2翻页监听
            handleTableChange(pagination) {
                this.pagination.current = pagination.current;
                this.pagination.pageSize = pagination.pageSize;

            },


            //获取表格数据
            getTableList() {
                this.loading = true;
                TimePeriodList(this.record.code).then(res => {
                    this.loading = false;
                    if (res.code === 0) {
                        this.dataSource = res.data.result;
                    }
                });
            },

            //删除时段队则
            removeTimePeriod(record){
                TimePeriodDelete(record.id).then(res=>{
                    this.$exMod.ajaxMessage(res);
                    if(res.code===0){
                        this.getTableList();
                    }

                })
            },

            //打开编辑器
            openEdit(obj={}){
              //如果对象为空   设置默认的规则代码
             if( Object.keys(obj).length===0){
                 obj.ruleCode=this.record.code;
             }
                this.editRecord=obj;
                this.editShow=true;

            },

            //关闭编辑器
            closeEdit(e){
                this.editShow=false;
                this.editRecord={};
                if(e.render){
                    this.getTableList();
                }

            }

        },
        created() {
            this.title = "【" + this.record.groupName + "】" + this.record.vehicleTypeName + "_时段规则设置";
            this.getTableList();
        }
    };
</script>
